<template>
    <div class="tags-wrapper">
        <div class="tags-container">
            <Tag v-for="(tag, index) in tags" :key="index" :text="tag" />
        </div>
        <span class="more-tag" @click="handleMoreClick">更多</span>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Tag from './Tag.vue';

const router = useRouter();
const tags = Array(11).fill('').map((_, index) => `Tag ${index + 1}`);

const handleMoreClick = () => {
    router.push('/songlist');
    // 确保跳转后滚动到页面顶部
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
};
</script>

<style scoped>
.tags-wrapper {
    display: flex;
    align-items: flex-start;
    margin-left: 70px;
    margin-right: 80px;
    margin-top: 60px;
    margin-bottom: 20px;
    gap: 20px;
}

.tags-container {
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    min-width: 1150px;
}

.more-tag {
    color: gray;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: 10px;
    font-size: 16px;
}

.more-tag:hover {
    color: red;
}
</style>